<template>
  <div
    class="custom-node"
    :style="{ width: node.width + 'px', height: node.height + 'px' }"
  >
    <div class="node-header" :class="node.status">{{ node.title }}</div>
    <div class="node-content">
      <slot></slot>
    </div>
    <div class="node-footer">{{ node.footer }}</div>
  </div>
</template>

<script>
export default {
  inject: ["getNode"],
  data() {
    return {
      node: {
        title: "",
        footer: "",
        status: "",
        width: 180,
        height: 95,
      },
    };
  },
  mounted() {
    const node = this.getNode();
    this.node = { ...node.data };
  },
};
</script>

<style scoped>
.custom-node {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 180px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.node-header {
  padding: 8px;
  background: #1890ff;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.node-header.sucess {
  background: #52c41a;
}
.node-header.error {
  background: #f5222d;
}

.node-content {
  padding: 12px;
}

.node-footer {
  padding: 8px;
  background: #f5f5f5;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  font-size: 12px;
}
</style>
